<template>
    <div style="width:100%;height:auto; margin:0 auto;">
      <el-form ref="ruleForm" :model="form" label-width="100px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型">
              <el-select v-model="form.type" style="width:100%;" disabled>
                <template>
                  <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号">
              <el-input v-model="form.sortNum" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="项目名称">
              <el-input v-model="form.xiangmumingcheng" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目目录模型">
              <el-select v-model="form.catalogId" style="width:100%;" disabled>
                <el-option v-for="item in mlList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否展示api">
              <el-select v-model="form.ifzs" style="width:100%;" disabled>
                <el-option v-for="item in ynTypes" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <div slot="label">审批意见<font color="red">*</font></div>
              <el-input v-model="comments" type="textarea" :autosize="{ minRows: 2, maxRows: 2}" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:center;">
        <el-button type="primary" @click="approvel('3')">审批通过</el-button>
        <el-button type="danger" @click="approvel('4')">审批驳回</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import { getInfo } from '@/api/projectInfo'
  import { saveData } from '@/api/projectInfoRecords'
  import { getListByCode } from '@/api/catalogManage'
  import { getDictListByCode } from '@/api/dict'
  
  import { Message } from 'element-ui'
  
  export default {
    inject: ['getList'],
    props: { // 第二种方式
      proid: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        form: {},
        comments: '',
        ynTypes: [],
        xmTypes: [],
        mlList: []
      }
    },
    created() {
      this.getDictList('CDS_XIANGMU_TYPE')
      this.getDictList('CDS_YON')
      this.getMlList()
    },
    methods: {
      getMlList() {
        getListByCode({ code: 'PROJECT_CATALOG' }).then(response => {
          this.mlList = response.data
        })
      },
      getDetailed() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        getInfo({ code: this.proid }).then(response => {
          this.form = response.data.projectInfo
  
          loading.close()
        }).catch(function() {
          loading.close()
        })
      },
      getDictList(code) {
        getDictListByCode(code).then(response => {
          if (code === 'CDS_XIANGMU_TYPE') {
            this.xmTypes = response.data
          }
          if (code === 'CDS_YON') {
            this.ynTypes = response.data
          }
        })
      },
      getDicName(code, flag) {
        var dict = []
        if (flag === 'CDS_XIANGMU_TYPE') {
          dict = this.xmTypes
        } else if (flag === 'CDS_YON') {
          dict = this.ynTypes
        }
        for (var i in dict) {
          if (dict[i].code === code) {
            return dict[i].name
          }
        }
      },
      approvel(flag) { // 新增
        if (this.comments === null || this.comments === '' || this.comments === 'null' || this.comments === undefined) {
          this.$message({
            type: 'error',
            message: '审批意见不能为空'
          })
          return
        } else {
          let title = null
          if (flag === '3') {
            title = '审批通过'
          } else {
            title = '审批驳回'
          }
          this.$confirm('确定要' + title + '此项目吗, 是否继续?', title + '项目', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
  
            var approveData = {}
            approveData.projectId = this.form.id
            approveData.result = flag
            approveData.opinion = this.comments
            saveData(approveData).then(response => {
              Message({
                message: title + '成功',
                type: 'success',
                duration: 5 * 1000
              })
  
              this.$emit('update:visible', false)
              loading.close()
              this.getList()
            }).catch(response => {
              loading.close()
              this.getList()
            })
          })
        }
      }
    }
  }
  </script>
  